<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>兼容性问题</title>
    <link rel="stylesheet" href="./global.css">
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background: pink;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <!-- 案例 -->
    <div class="div1">双倍margin</div>


    <!-- ==================================== -->
    <div class="learn">
        <h1>兼容性问题</h1>

            <h2>1. 引起兼容性问题的几种原因</h2>
                <ul>
                    <li>没有正确使用doctype</li>
                    <li>各浏览器对不同标签的初始化不同</li>
                    <li>自身书写不规范</li>
                    <li>浏览器的bug</li>
                </ul>
            
            <h2>2. 常见bug案例</h2>
                <h3>盒子模型bug</h3>
                    <p>不同的浏览器对于不同的盒子宽高有不同的解析规则</p>
                    <p>解决办法： 通过doctype申明使用严格模式</p>

                <h3>双倍margin bug</h3>
                    <p>老版本的ie存在双倍margin问题</p>
                    <p>解决办法： 使用 _display: inline</p>
                    <p>注意_display只针对ie浏览器生效，不同影响其他浏览器</p>

                <h3>不认识a:link</h3>
                    <p>ie老版本不认识a：link伪类</p>

                <h3>3像素margin bug</h3>
                    <p>因为书写不规范，只给一个元素设置float，导致存在3px的间隔</p>
                    <p>解决办法： 给所有的元素都添加float属性</p>

                <h3>ul默认间距不一致</h3>
                    <p>ul都会存在一个默认的间距，一般为40px，但是有的浏览器可能
                        会出现不同的效果
                    </p>
                    <p>解决的办法： 初始化margin和padding为0</p>
    </div>
</body>
</html>